<template>
    <div class="phoneNumber">
        <form id="login-form">
            <dl class="list">
                <dd class="dd-padding">
                    <input id="mobile-number" class="input-weak" type="tel" placeholder="请输入您的手机号" name="mobile" autocomplete="off" v-model="mobile">
                </dd>
            </dl>
            <div class="mint-cell-wrapper">
                <div class="mint-cell-title">
                    <label class="mint-checklist-label">
                        <span class="mint-checkbox">
                            <input type="checkbox" class="mint-checkbox-input" value="选项A" checked=false>
                            <span class="mint-checkbox-core"></span>
                        </span>
                        <span class="mint-checkbox-label">
                            我已阅读并同意<a href="//i.meituan.com/about/terms">《美团网用户协议》</a>
                        </span>
                    </label>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="mint-button mint-button--default mint-button--large is-disabled getCode" @click="getCode" type="button">
                    <label id="code">获取验证码</label>
                </button>
<!--                <button class="mint-button mint-button&#45;&#45;danger mint-button&#45;&#45;large" type="button"> -->
<!--                    <label class="mint-button-text">danger</label>-->
<!--                </button>-->
<!--                <button disabled="disabled" class="mint-button mint-button&#45;&#45;default mint-button&#45;&#45;large is-disabled getCode" @click="getCode"> <label class="mint-button-text">获取验证码</label></button>-->
            </div>
        </form>
        <div class="copyright">
            <span class="copyright">© 猫眼电影 客服电话：
                <a href="tel:4006705335">400-670-5335</a>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mobile: '',
                code: ''
            }
        },
        watch: {
            mobile: {
                handler() {
                    this.changeBtn()
                }
            }
        },
        methods: {
            getCode() {
                if (this.mobile === '') {
                    alert("请输入手机号")
                }
                else {
                    this.code = Math.floor(Math.random()*(9999-1000))+1000
                    // console.log(this.code)

                    alert("请记住你的验证码：" + this.code)

                    this.$router.push(`/register/code/?code=${this.code}&mobile=${this.mobile}`)
                }

            },
            changeBtn() {
                if (this.mobile.length === 0) {
                    $(".getCode").css({"background-color": '#dcdcdc'})
                    $("#code").css({'color': '#656b79'})
                }
                else if (this.mobile.length > 0 ) {
                    $(".getCode").css({"background-color": 'red'})
                    $("#code").css({'color': '#ffffff'})
                }else {
                    $(".getCode").css({"background-color": '#dcdcdc'})
                    $("#code").css({'color': '#656b79'})
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .phoneNumber {
        #login-form {
            .list {
                background-color: #fff;
                dd {
                    margin: 0;
                    overflow: hidden;
                    font-weight: 400;
                    position: relative;
                    border-bottom: 1px solid #d6d6d6;
                }
                .dd-padding {
                    padding: .28rem .2rem;
                    .crumbs {
                        list-style: none;
                        padding-left: 0;
                        text-align: center;
                        margin: 0;
                        li {
                            display: inline-block;
                            text-align: center;
                        }
                        li + li {
                            margin-left: .6rem;
                            position: relative;
                        }
                        li + li:before {
                            content: ">";
                            display: block;
                            position: absolute;
                            left: -.4rem;
                            font-weight: bolder;
                            color: #aaa;
                        }
                        .active {
                            color: #df2d2d;
                        }
                    }
                }
                .input-weak {
                    border: 0;
                    height: .6rem;
                    margin: -.15rem 0;
                    text-indent: .1rem;
                    line-height: 1;
                    font-size: .3rem;
                    border-radius: .06rem;
                    padding: 0;
                    width: 100%;
                    outline: none;
                }
                .input-weak:focus {
                    background-color: #f8f8f8;
                }
            }
            .mint-cell-wrapper {
                padding: 0;
                margin-top: 10px;
                .mint-cell-title {
                    .mint-checklist-label {
                        .mint-checkbox {
                            .mint-checkbox-core {
                                border-radius: 20%;
                                background-color: #df2d2d;
                                border: 0;
                            }
                        }
                        .mint-checkbox-label {
                            font-size: 0.24rem;
                            a {
                                color: #df2d2d;
                            }
                        }
                    }
                }
            }
            .btn-wrapper {
                margin-top: 0.28rem;
                .getCode {
                    background-color: #dcdcdc;
                }
            }
        }
        .copyright {
            margin-top: 0.28rem;
            width: 100%;
            span {
                font-size: .26rem;
                text-align: center;
                display: block;
                width: 5rem;
                margin: 0 auto;
                a {
                    color: #df2d2d;
                }
            }
        }
    }
</style>